<template>
  <view>
    <view :class="['option',active===index?'active':'']" @click="choose(index)">
      {{name}}
    </view>
  </view>
</template>
<script>
  export default {
    props: {
      index: Number,
      name: String,
      active: Number
    },
    data() {
      return {}
    },
    methods: {
      choose(i) {
        this.$emit('choose', this.index)
      }
    }
  }
</script>
<style lang="scss">
  .option {
    width: 90%;
    margin: 0 auto;
    border: 1rpx solid #ddd;
    border-radius: 20rpx;
    padding: 40rpx 30rpx;
    margin-top: 40rpx;
    box-sizing: border-box;
  }

  .active {
    background-color: #b6eaae;
    color: #fff;
    border-color: #056405;
  }
</style>